﻿<!DOCTYPE html>
<html lang="zh">

<head resource>
    <include file="../inc/meta.inc" />
    <title>学习卡</title>
</head>

<body>
    <div id="app" v-cloak>
        <div class="toolsbar">
            <el-button-group>
                <el-button type="info" size="small" :disabled="codesetLoading" plain @click="cardsetVisible=true">
                    <span icon="&#xa022"></span>详情
                </el-button>
                <el-button type="primary" size="small" plain @click="OutputExcel">
                    <span icon="&#xa022"></span>导出Excel
                </el-button>
                <el-button type="success" size="small" plain @click="OutputQrcode">
                    <span icon="&#xa046"></span>导出二维码
                </el-button>
            </el-button-group>
            <query_panel :model="form" :loading="loading" @search="handleCurrentChange(1)">
                <el-form-item label="">
                    <el-checkbox label="已使用" v-model="form.isused"></el-checkbox>
                </el-form-item>
                <el-form-item label="">
                    <el-checkbox label="禁用" v-model="form.isdisable"></el-checkbox>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model.trim="form.code" placeholder="充值码/不要带密码" clearable style="width:200px"
                        @clear="handleCurrentChange(1)"> </el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model.trim="form.account" placeholder="使用人账号" clearable style="width:100px"
                        @clear="handleCurrentChange(1)"> </el-input>
                </el-form-item>
            </query_panel>
        </div>
        <template>
            <el-table ref="datatable" :data="datas" :stripe="true" tooltip-effect="dark" style="width: 100%"
                @selection-change="val=>selects=val" row-key="Lc_ID"
                :row-class-name="data=>{return data.row.Rc_IsEnable && !data.row.Rc_IsUsed ? 'enable' : 'disabled';}">
                <el-table-column type="selection" width="40">
                </el-table-column>
                <el-table-column type="index" width="50">
                    <template slot-scope="scope">
                        <span>{{(form.index - 1) * form.size + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="充值码-密码">
                    <template slot-scope="scope">
                        <div title="双击复制充值码信息" @dblclick="rowdblclick(scope.row)"> <span
                                v-html='showsearch(scope.row.Rc_Code,form.code)'></span>
                            - {{scope.row.Rc_Pw}}</div>

                    </template>
                </el-table-column>
                <el-table-column label="使用时间" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.Rc_IsUsed">{{scope.row.Rc_UsedTime|date('yyyy-MM-dd HH:mm:ss')}}</span>

                    </template>
                </el-table-column>
                <el-table-column label="使用人" align="center">
                    <template slot-scope="scope">
                        <el-link v-if="scope.row.Rc_IsUsed" @click="acccountInfo(scope.row)"
                            v-html='showsearch(scope.row.Ac_AccName,form.account)'>/el-link>

                    </template>
                </el-table-column>
                <el-table-column label="启用" width="60" align="center">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.Rc_IsEnable" :disabled="scope.row.Rc_IsUsed" size="mini"
                            @change="changeEnable(scope.row)" :title="scope.row.Rc_IsUsed ? '已经使用过，禁用没有意义' : '禁用'">
                        </el-switch>
                    </template>
                </el-table-column>
            </el-table>

        </template>
        <div id="pager-box">
            <el-pagination v-on:current-change="handleCurrentChange" v-if="!loading" :current-page="form.index"
                :page-sizes="[1]" :page-size="form.size" :pager-count="12" layout="total, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <el-dialog :title="'充值卡 '+ current.Rc_Code+'-'+current.Rc_Pw+' 的使用情况'" :visible.sync="currentVisible"
            width="80%">
            <template v-if="current.account">
                <el-row :gutter="20">
                    <el-col :span="6">卡号</el-col>
                    <el-col :span="18"> {{current.Rc_Code}} - {{current.Rc_Pw}}</el-col>

                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">有效期</el-col>
                    <el-col :span="18">

                        {{current.Rc_LimitStart|date('yyyy-MM-dd')}}
                        至
                        {{current.Rc_LimitEnd|date('yyyy-MM-dd')}}
                    </el-col>

                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">面额</el-col>
                    <el-col :span="18">
                        <icon coupon>{{current.Rc_Price}}</icon>
                    </el-col>

                </el-row>
                <el-row :gutter="20" v-if="current.account">
                    <el-col :span="6">使用人</el-col>
                    <el-col :span="18" class="accountInfo">
                        <img v-if="current.account.Ac_Photo!=''" :src="current.account.Ac_Photo" class="avatar photo">
                        <img v-else class="el-icon-plus avatar-uploader-icon avatar  photo"
                            src="/Utilities/images/head1.jpg" />
                        <icon :man="current.account.Ac_Sex!='2'" :woman="current.account.Ac_Sex=='2'">
                            {{current.account.Ac_Name}} ({{current.account.Ac_AccName}})</icon>
                        <div icon="&#xe60f" title="身份证">
                            {{current.account.Ac_IDCardNumber}}
                        </div>
                        <div icon="&#xa047" title="电话">
                            <span v-html='current.account.Ac_MobiTel1'></span>
                            <span
                                v-if="current.account.Ac_MobiTel1!='' && current.account.Ac_MobiTel2!='' && current.account.Ac_MobiTel1!= current.account.Ac_MobiTel2 ">/</span>
                            <span v-if="current.account.Ac_MobiTel1!= current.account.Ac_MobiTel2 "
                                v-html='current.account.Ac_MobiTel2'></span>
                        </div>

                    </el-col>

                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">使用时间</el-col>
                    <el-col :span="18">
                        <span v-if="current.Rc_IsUsed">{{current.Rc_UsedTime|date('yyyy-MM-dd HH:mm:ss')}}</span>
                    </el-col>

                </el-row>
            </template>

        </el-dialog>

        <el-dialog :title="'充值码详情'" :visible.sync="cardsetVisible" class="cardsetVisible">
            <template>
                <el-row :gutter="20">
                    <el-col :span="6">主题</el-col>
                    <el-col :span="18"> {{codeset.Rs_Theme}} </el-col>

                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">面额</el-col>
                    <el-col :span="18">
                        <icon coupon>{{codeset.Rs_Price}}</icon> 元
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="6">有效期</el-col>
                    <el-col :span="18">
                        {{codeset.Rs_LimitStart|date('yyyy-MM-dd')}}
                        至
                        {{codeset.Rs_LimitEnd|date('yyyy-MM-dd')}}
                    </el-col>

                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">数量</el-col>
                    <el-col :span="18">
                        <el-tag effect="dark" type="success">
                            总数量： {{codeset.Rs_Count}} 张
                        </el-tag>
                        <el-tag effect="dark" type="warning">
                            被禁用：{{num.disable}} 张
                        </el-tag>
                        <el-tag effect="dark">
                            已使用： {{codeset.Rs_UsedCount}} 张
                        </el-tag>
                    </el-col>

                </el-row>
            </template>

        </el-dialog>
    </div>


</body>

</html>